<template>
    <div class="pageCon">
      <el-checkbox class="allSelect">全选(已选中1个)</el-checkbox>
      <el-pagination
        class="page"
        background
        small
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page.sync="PagePageNum"
        :page-size="PageSize"
        :page-sizes="[10, 20, 30]"
        :total="PageTotal"
        layout="sizes,prev, pager, next,jumper"
      >
      </el-pagination>
    </div>
  </template>
  
  <script>
  export default {
    name: "MyPagenation",
      props:{
          currentChange:Function,
          sizeChange:Function,
          currentPageSync:Number,
          pageSize:Number,
          total:Number
      },
      data(){
          return{
              PagePageNum:this.currentPageSync,
              PageSize:this.pageSize,
              // 像下边这种不会改变的总值，不用使用data命名，可以使用计算属性命名
              // PageTotal:this.total,
              pageInfo:{
          page:1,
          size:10
        },
          }
      },
      methods:{
          handleCurrentChange(val){
              this.currentChange(val)
          },
          handleSizeChange(val){
              this.sizeChange(val)
          }
      },
      computed:{
          PageTotal(){
              return this.total
          }
      }
  };
  </script>
  
  <style scoped lang="less">
  .pageCon{
      display: flex;
      padding-bottom: 5px;
  }
  .allSelect {
    margin-left: 18px;
    margin-top: 15px;
  }
  ::v-deep .allSelect .el-checkbox__inner {
    background-color: #042c2c;
    border-color: #00e7e7;
  }
  .page {
    margin: auto;
    margin-top: 15px;
  }
  ::v-deep .el-pagination__sizes .el-select .el-input .el-input__inner{
    width: 100px;
  }
  ::v-deep .el-select-dropdown__list .el-select-dropdown__item .selected{
    color: #042c2c;
  }
  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
	  background-color: #00e7e7;
  }
  /* 每页最大条数的hover样式 */
  /* ::v-deep .el-select:hover .el-input__inner{
    border-color: #00e7e7;
  } */
  /* 去掉小三角 */
  ::v-deep .el-popper[x-placement^=top] .popper__arrow{
    display: none;
  }
  </style>